<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="部门">
                        <el-select  filterable placeholder="请选择部门" v-model="selectfrom.Department">
                            <el-option :value="0" label="请选择部门"></el-option>
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目">
                        <el-select  filterable placeholder="请选择项目" v-model="selectfrom.Project">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目类型">
                        <el-select filterable  placeholder="请选择项目类型" v-model="selectfrom.ProjectType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="施工生产"></el-option>
                            <el-option :value="2" label="产品生产"></el-option>
                            <el-option :value="4" label="产品研发"></el-option>
                            <el-option :value="8" label="技术服务"></el-option>
                            <el-option :value="16" label="其它"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司财务成本表</el-col>
                    <el-col>
                        <el-table  id="wrapperFinanceCostReport"  :data="tableData"  border  show-summary >
                            <el-table-column label="序号" align="center" show-overflow-tooltip type="index" width="50"></el-table-column>
                            <el-table-column label="单号" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.Number }}
                                </template>
                            </el-table-column>
                            <el-table-column label="日期" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.BorrowTime }}
                                </template>
                            </el-table-column>
                            <el-table-column label="部门" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetDepartmentName(slot.row.Department) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="项目" align="center" width="380">
                                <template slot-scope="slot">
                                    {{ GetProjectName(slot.row.Project) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="项目类型" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ GetProjectTypeName(slot.row.Project) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="成本一（元）已报销" prop="CostOne" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.CostOne  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="成本二（元）未报销" prop="CostTwo" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.CostTwo  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="合计(元)" prop="AllCost" align="center" show-overflow-tooltip>
                                <template slot-scope="slot">
                                    {{ slot.row.AllCost  }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="项目报表" name="3">
                <div class="layui-colla-content layui-show" id="EchartData">
                    <div class="pie">
                        <div class="pieData" id="leftData"></div>
                        <div class="pieData" id="rightData"></div>
                    </div>
                    <div id="appendData"></div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import Echatrs from "echarts";

    export default {
        name: "FinanceCostReport",
        props:{
            AllProject:{
                type:Array,
                required:true
            },
            AllDepartment:{
                type:Array,
                required:true
            },
        },
        created() {
            this.InitDate();
            publicjs.setecharts(Echatrs)
        },
        mounted() {
            this.$nextTick(()=>{
                this.formdata()
            })
        },
        data(){
            return{
                activeNames: ['1','2','3'],
                selectfrom:{
                    Department:0,
                    Project:0,
                    ProjectType:0,
                    Start:'',
                    End:'',
                },
                tableData:[],
                wrapper: {
                    width: "100%",
                    height: "100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperFinanceCostReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司财务成本表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
             var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetFinanceCostReportData',{
                    from:this.selectfrom
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data
                    this.tableData.forEach(d=>{
                        d.BorrowTime = this.timeconversion(d.BorrowTime)
                    })
                    this.InitEchart(this.tableData)
                })
            },
            //获取对应部门名字
            GetDepartmentName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllDepartment.length;i++){
                        if (this.AllDepartment[i].Id == value){
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllProject.length;i++){
                        if (this.AllProject[i].Id == value){
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            GetPayeeName(obj){
                let name=''
                if (obj.PayeeType == '1'){
                    for (let i=0; i<this.AllCustomer.length; i++){
                        if (this.AllCustomer[i].Id == obj.Payee){
                            name = this.AllCustomer[i].CustomerName
                            return name
                        }
                    }
                }else if (obj.PayeeType == '2'){
                    for (let i=0; i<this.$store.state.AllUsers.length; i++){
                        if (this.$store.state.AllUsers[i].Id == obj.Payee){
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            GetProjectTypeName(value){
                let name=''
                if (value!=0){
                    for(let i=0;i<this.AllProject.length;i++){
                        if (this.AllProject[i].Id == value){
                            switch (this.AllProject[i].ProjectType ) {
                                case 1:
                                    name='施工生产'
                                    break;
                                case 2:
                                    name='产品生产'
                                    break;
                                case 4:
                                    name='产品研发'
                                    break;
                                case 8:
                                    name='技术服务'
                                    break;
                                case 16:
                                    name='其他'
                                    break;
                            }
                        }
                    }
                }
                return name
            },
            // echarts表格加载
            InitEchart(dataLi){
                dataLi.forEach(d=>{
                    for(let i=0; i<this.AllDepartment.length; i++){
                        if (this.AllDepartment[i].Id == d.Department){
                            d.DepartmentName = this.AllDepartment[i].DepartmentName;
                            break;
                        }
                    }
                    for(let j=0; j<this.AllProject.length; j++){
                        if (this.AllProject[j].Id == d.Project){
                            d.ProjectName  = this.AllProject[j].ProjectName;
                            break;
                        }
                    }
                })
                var departData = JSON.stringify(dataLi.filter(x => x.Project == 0));
                var projectData = JSON.stringify(dataLi.filter(x => x.Project != 0));
                var noRepeatDepartData = publicjs.DataGroupBy(departData, "Department", "AllCost");
                var new_DepartName = noRepeatDepartData.map(obj => { return obj.DepartmentName; });
                var new_DepartData = noRepeatDepartData.map(obj => { return { name: obj.DepartmentName, value: obj.AllCost }; });
                publicjs.InitEchartPie("leftData", "部门成本占比", "单位：人民币（元）", new_DepartName, "部门成本占比", new_DepartData)

                //按照项目分组统计
                var noRepeatProjectData = publicjs.DataGroupBy(projectData, "Project", "AllCost");
                var new_ProjectName = noRepeatProjectData.map(obj => { return obj.ProjectName; });
                var new_ProjectData = noRepeatProjectData.map(obj => { return { name: obj.ProjectName, value: obj.AllCost }; });
                publicjs.InitEchartPie("rightData", "项目成本占比", "单位：人民币（元）", new_ProjectName, "项目成本占比", new_ProjectData);

                //按照项目分类构造走势图
                noRepeatProjectData.forEach((d,i)=>{
                    var data = publicjs.DataGroupBy(JSON.stringify(dataLi.filter(x => x.Project == d.Project)), "BorrowTime", "AllCost");
                    var dataList = data.map(x => { return x.BorrowTime });
                    var valueList = [], gapList = [];
                    gapList.push(0);
                    var oldAmount = 0, TotalAllCost=0;
                    data.forEach((dd, ii)=>{
                        if (dd == null || dd == undefined) {
                            dd.AllCost = 0;
                        }
                        valueList.push(dd.AllCost);
                        if (ii != 0) {
                            oldAmount = publicjs.dcmAdd(gapList[ii - 1], valueList[ii - 1]);
                            gapList.push(oldAmount);
                        }
                        TotalAllCost = publicjs.dcmAdd(TotalAllCost, dd.AllCost);
                    })
                    dataList.push("总成本");
                    valueList.push(TotalAllCost);
                    gapList.push(0);
                    let div = document.createElement("div")
                    div.className='bar'
                    div.id = 'PData' + i + '';
                    div.style="width: 100%; height: 500px;"
                    document.getElementById("appendData").appendChild(div);
                    publicjs.InitEchartBar_Total("PData" + i + "", d.ProjectName + "--项目成本（元）", dataList, valueList, gapList,"今日成本");
                })
                //按照部门分类构造走势图
                noRepeatDepartData.forEach((d,i)=>{
                    var data = publicjs.DataGroupBy(JSON.stringify(dataLi.filter(x => x.Department == d.Department)), "BorrowTime", "AllCost");
                    var dataList = data.map(x => { return x.BorrowTime });
                    var valueList = [], gapList = [];
                    gapList.push(0);
                    var oldAmount = 0, TotalAllCost = 0;
                    data.forEach((dd,ii)=>{
                        if (dd == null || dd == undefined) {
                            dd.AllCost = 0;
                        }
                        valueList.push(dd.AllCost);
                        if (ii != 0) {
                            oldAmount = publicjs.dcmAdd(gapList[ii - 1], valueList[ii - 1]);
                            gapList.push(oldAmount);
                        }
                        TotalAllCost = publicjs.dcmAdd(TotalAllCost, dd.AllCost);
                    })
                    dataList.push("总成本");
                    valueList.push(TotalAllCost);
                    gapList.push(0);
                    let div = document.createElement("div")
                    div.className='bar'
                    div.id = 'DData' + i + '';
                    div.style="width: 100%; height: 500px;"
                    document.getElementById("appendData").appendChild(div);
                    publicjs.InitEchartBar_Total("DData" + i + "", d.DepartmentName + "--部门成本（元）", dataList, valueList, gapList, "今日成本");
                })
            },
            //时间转化
            timeconversion(value){
                let time = value.split(' ')
                return time[0]
            }
        },
    }
</script>

<style scoped>
    .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }
    .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }
    #EchartData .pie {
        height: 500px;
    }
    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }
    #EchartData .bar {
        width: 100%;
        height: 500px;
    }
</style>
